//统计页JS
$(function(){

});


  var strOption="";
  var zuoyeType=["完成率与正确率","发布次数与题量"];
  var videoType=["观看次数与时长","录制总数与时长"];
  var useType=["学生使用次数与时长","教师使用次数与时长"];
  var rangStr1=["学生","班级","年级","全校"];
  var rangStr2=["教师","班级","年级","全校"];
//左侧页签点击逻辑
$(".classItem").click(function(){
	$(this).addClass("liActive").siblings(".classItem").removeClass("liActive");
	$("#typeSelect").find("option").remove();
	switch($(this).index()){
		case 0:
			$(".tongjiTitle").text("作业统计");
			for(var i=0;i<zuoyeType.length;i++){
				strOption="<option value="+i+">"+zuoyeType[i]+"</option>";
				$("#typeSelect").append(strOption);
			}
		    break;
		case 1:
			$(".tongjiTitle").text("视频统计");
			for(var i=0;i<videoType.length;i++){
				strOption="<option value="+i+">"+videoType[i]+"</option>";
				$("#typeSelect").append(strOption);
			}
			break;
		case 2:
			$(".tongjiTitle").text("软件使用情况统计");
			for(var i=0;i<useType.length;i++){
				strOption="<option value="+i+">"+useType[i]+"</option>";
				$("#typeSelect").append(strOption);
			}
			break;
	}
	
});
//统计项下拉框选择逻辑
$("#typeSelect").change(function(){
	$(".rangSelect").eq($(this).val()).removeClass("am-hide").siblings(".rangSelect").addClass("am-hide");
});


//统计范围下拉框逻辑
$(".rangSelect").change(function(){
	$(".peopleList").eq($(this).val()).removeClass("am-hide").siblings(".peopleList").addClass("am-hide");
});



// ===================图表实例化 以下为各个图表的draw方法和具体option设置等 Start=================================================================================================------------------
//配置一个页面显示两张图表的方法Start---
require(
     DrawEChartsAll()
);
//配置一个页面显示两张图表的方法End-----

//画多个图表的封装方法---Start---
function DrawEChartsAll(){
	drawEChartsItem("showEChartsDiv1",option_line);
	drawEChartsItem("showEChartsDiv2",option_bar);
};
//画多个图表的封装方法---End-----

//绘制图表方法--Start------------
function drawEChartsItem(myDiv,myOption){
//   srcipt标签式引入
var myChart = echarts.init(document.getElementById(myDiv));
// 过渡---------------------
//myChart.showLoading({
//  text: '数据加载中...',    //loading话术
//});

// ajax getting data...............

// ajax callback
//myChart.hideLoading();
myChart.setOption(myOption);
};
//绘制折线图表方法--End-----------------------

// 图表使用1--折线图-------------------
 var option_line = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['完成率','正确率']
    },
    toolbox: {
        show : true,
        feature : {
//          mark : {show: true},
//          dataZoom : {show: true},
//          dataView : {show: true},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    dataZoom : {
        show : true,
        realtime : true,
        start : 20,
        end : 80
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : function (){
                var list = [];
                for (var i = 1; i <= 30; i++) {
                    list.push('2013-03-' + i);
                }
                return list;
            }()
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'完成率',
            type:'line', //传入的图标类型变量
            data:function (){
                var list = [];
                for (var i = 1; i <= 30; i++) {
                    list.push(Math.round(Math.random()* 30));
                }
                return list;
            }()
        },
        {
            name:'正确率',
            type:'line',//传入的图标类型变量
            data:function (){
                var list = [];
                for (var i = 1; i <= 30; i++) {
                    list.push(Math.round(Math.random()* 10));
                }
                return list;
            }()
        }
    ]
};
                      

// 图表使用1--折线图-1th End------------------


//图2柱状图---Start--------------------------

var option_bar = {
    tooltip : {
        show: true,
        trigger: 'item'
    },
    legend: {
        data:['邮件营销','联盟广告','直接访问','搜索引擎']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'邮件营销',
            type:'bar',
            itemStyle: {        // 系列级个性化样式，纵向渐变填充
                normal: {
                    barBorderColor:'red',
                    barBorderWidth: 5,
                    color : (function (){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'green'],[1, 'yellow']]
                        )
                    })()
                },
                emphasis: {
                    barBorderWidth: 5,
                    barBorderColor:'green',
                    color: (function (){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 400, 0, 300,
                            [[0, 'red'],[1, 'orange']]
                        )
                    })(),
                    label : {
                        show : true,
                        position : 'top',
                        formatter : "{a} {b} {c}",
                        textStyle : {
                            color: 'blue'
                        }
                    }
                }
            },
            data:[220, 232, 101, 234, 190, 330, 210]
        },
        {
            name:'联盟广告',
            type:'bar',
            stack: '总量',
            data:[120, '-', 451, 134, 190, 230, 110]
        },
        {
            name:'直接访问',
            type:'bar',
            stack: '总量',
            itemStyle: {                // 系列级个性化
                normal: {
                    barBorderWidth: 6,
                    barBorderColor:'tomato',
                    color: 'red'
                },
                emphasis: {
                    barBorderColor:'red',
                    color: 'blue'
                }
            },
            data:[
                320, 332, 100, 334,
                {
                    value: 390,
                    symbolSize : 10,   // 数据级个性化
                    itemStyle: {
                        normal: {
                            color :'lime'
                        },
                        emphasis: {
                            color: 'skyBlue'
                        }
                    }
                },
                330, 320
            ]
        },
        {
            name:'搜索引擎',
            type:'bar',
            barWidth: 40,                   // 系列级个性化，柱形宽度
            itemStyle: {
                normal: {                   // 系列级个性化，横向渐变填充
                    borderRadius: 5,
                    color : (function (){
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(
                            0, 0, 1000, 0,
                            [[0, 'rgba(30,144,255,0.8)'],[1, 'rgba(138,43,226,0.8)']]
                        )
                    })(),
                    label : {
                        show : true,
                        textStyle : {
                            fontSize : '20',
                            fontFamily : '微软雅黑',
                            fontWeight : 'bold'
                        }
                    }
                }
            },
            data:[
                620, 732, 
                {
                    value: 701,
                    itemStyle : { normal: {label : {position: 'inside'}}}
                },
                734, 890, 930, 820
            ],
            markLine : {
                data : [
                    {type : 'average', name : '平均值'},
                    {type : 'max'},
                    {type : 'min'}
                ]
            }
        }
    ]
};                   

//图2柱状图---End--------------------------                    


// 增加些数据------------------
//option.legend.data.push('win');
//option.series.push({
//      name: 'win',                            // 系列名称
//      type: 'line',                           // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
//      data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
//});
//myChart.setOption(option1);



// 图表清空-------------------
//myChart.clear();

// 图表释放-------------------
//myChart.dispose();